2023年3月3日

Qwikスターターの紹介 – 今すぐQwikを起動・実行してみよう

パフォーマンス

Introducing Qwik starters - get up and running with Qwik now

(2021-12-15)by Miško Hevery

本記事は、原著者の許諾のもとに翻訳・掲載しております。

コードを書いて新たな発見をするほど楽しいことはありません。ついにnpm init qwikの登場です。どんなサイズでもリーンで高パフォーマンスなWebアプリを開発するための新たな方法をお試しください。 builder.ioのサイトも同じ技術で開発されており、PageSpeed Insightsで100点中100点を獲得しています。

QwikスターターCLIは、Qwikを試しに直接体験してみて、他のフレームワークとの違いを深く理解するためのシンプルなスターターです。このCLIに含まれている例は次の4つで、近い将来に拡張される予定です。

starter：基本的なHello Worldプログラム。
starter-builder：基本的なHello Worldプログラムをbuilder.ioのQwik APIと統合したもの。
starter-partytown：基本的なHello Worldプログラム。Partytownを利用して、Web Workerで重いタスクを実行できることを明らかにします。
todo：古典的なTodoMVCアプリケーション。

基本的なスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-starter
✔ Select a starter › Starter
✔ Select a server › Express

⭐️ Success! Project saved in qwik-starter directory

📟 Next steps:
   cd qwik-starter
   npm install
   npm start

> (cd qwik-starter; npm install; npm start)

StackBlitzで試す

Builder Qwik APIを利用するスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-builder
✔ Select a starter › Starter Builder
✔ Select a server › Express

⭐️ Success! Project saved in qwik-builder directory

📟 Next steps:
   cd qwik-builder
   npm install
   npm start

> (cd qwik-builder; npm install; npm start)

StackBlitzで試す

Partytownを利用するスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-partytown
✔ Select a starter › Starter Partytown
✔ Select a server › Express

⭐️ Success! Project saved in qwik-partytown directory

📟 Next steps:
   cd qwik-partytown
   npm install
   npm start

> (cd qwik-partytown; npm install; npm start)

古典的なTodoMVC

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-todo
✔ Select a starter › Todo
✔ Select a server › Express

⭐️ Success! Project saved in qwik-todo directory

📟 Next steps:
   cd qwik-todo
   npm install
   npm start

> (cd qwik-todo; npm install; npm start)

StackBlitzで試す

プロファイラで解析

開発ツールを開き、上記の例をすべてプロファイラで解析してみてください。メインスレッドでほとんど時間がかかっていないのが分かるでしょう。

皆さんのコーディングが楽しくなることを願っています。ぜひフィードバックをお寄せください。

github.com/builderio/qwikでスターを送る
@QwikDev と@builderioをフォロー
Discordでチャット
builder.ioの採用情報

シリーズ記事一覧

info

シリーズ記事一覧はこちらから参照できます。

古川陽介
株式会社リクルート　プロダクト統括本部　プロダクト開発統括室　グループマネジャー株式会社ニジボックス　デベロップメント室室長 Node.js 日本ユーザーグループ代表

複合機メーカー、ゲーム会社を経て、2016年に株式会社リクルートテクノロジーズ(現リクルート)入社。現在はAPソリューショングループのマネジャーとしてアプリ基盤の改善や運用、各種開発支援ツールの開発、またテックリードとしてエンジニアチームの支援や育成までを担う。 2019年より株式会社ニジボックスを兼務し、室長としてエンジニア育成基盤の設計、技術指南も遂行。 Node.js 日本ユーザーグループの代表を務め、Node学園祭などを主宰。

Twitter: @yosuke_furukawa
Github: yosuke-furukawa